<!-- //请假 -->
<template>
	<view class="viewBg">
		<view class="lineH20"></view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker">
					<text class="cell-text">请假类型</text>
					<text class="cell-detail">{{selectedLabel}}</text>
				</view>
			</view>
		</view>
		<!-- 选择日期 -->
		<view class="selectDate" @click="onShowDatePicker">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<!-- <text class="dateText">{{selectedDate}}</text> -->
			<view class="uni-list-cell-db">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</view>
		<!-- 选择结束日期 -->
		<view class="selectDate" @click="onShowDatePicker2">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{dateEnd}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH20"></view>
		<view class="askLeaveTitle">请假事由</view>
		<view class="uni-textarea">
			<textarea placeholder="请输入请假事由" @blur="bindTextAreaBlur" @focus="hiddenText"/>
			</view>
		<view class="lineH1"></view>
		<button type="primary" @click="askLeave" v-if="Lhidden">确认请假，等待审核</button>
		<view class="footerView" @click="myAttenceAuditList" v-if="Lhidden">
			<text>请假记录</text>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	export default {
		components:{mpvuePicker,uniIcon},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			
			return {
				themeColor: '#007AFF',
				pickerValueDefault: [0],
				mode: '',
				pickerValueArray:[],
				selectedLabel:"请选择",
				selectedValue:0,
				date: currentDate,
				dateEnd: currentDate,
				reason:"",
                Lhidden:true
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		
		methods:{
			showPicker(){
				console.log("lsdlf"+this.pickerValueArray.length);
				if(this.pickerValueArray.length == 0){
					console.log("sdlfjsdlf");
					this.$http.get('ac/xagrid/appDictService/getDictItems',{type:"leave_type"}).then((res)=>{
						this.pickerValueArray = res.data;
						this.$refs.mpvuePicker.show();
					});
				}else{
					this.$refs.mpvuePicker.show();
				}
				this.mode = 'selector';
				this.deepLength = 1;
				this.pickerValueDefault = [0];
				
			},
		
			onConfirm(e){
				this.selectedLabel = e.label;
				this.selectedValue = e.value;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindEndDateChange: function(e) {
				this.dateEnd = e.target.value
			},
            hiddenText:function(){
	            this.Lhidden = false
            },
			bindTextAreaBlur: function (e) {
				this.Lhidden = true
				this.reason = e.detail.value;
			},
			askLeave:function(){
				console.log("请假事件"+ this.selectedValue +this.selectedLabel);
				if(this.selectedValue === 0){
					uni.showToast({
						title:"请选择请假类型"
					})
					return;
				}else if(this.reason.length == 0){
					uni.showToast({
						title:"请填写请假事由"
					})
					return;
				}else{
					this.$http.post('ac/xagrid/appAttenceService/createLeave',{leaveStart:this.date,leaveEnd:this.dateEnd,leaveType:this.selectedValue,leaveTypeName:this.selectedLabel,reason:this.reason}).then((res)=>{
						if(res.errcode === "0"){
							uni.showModal({
								content:"提交成功，请等待审核",
								title:"提示",
								complete(res) {
									uni.navigateBack({
									
									})
								}
							});
							
						}else{
							uni.showToast({
								title:res.errmsg,
								icon:'none'
							})
						}
					})
				}
			},
			myAttenceAuditList(){
				uni.navigateTo({
					url:'../myAttenceAudit/myAttenceAudit'
				})
			},
			getDate(type) {
				const date = new Date();
			
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
			
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
.viewBg{
		width: 100%;
		height: 100%;
		
		/* background-color: #0FAEFF; */
	}
	.cell-detail{
		margin-right: 20upx;
	}
	.uni-list-cell-navigate{
		justify-content: space-between;
	}
	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}
	.lineH1{
		
		height: 2upx;
		/* width: 100%; */
		margin-left: 10upx;
		background-color: #F7F7F7;
	}
	.selectDate {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.askLeaveTitle{
		margin: 20upx;
	}
	button{
		margin: 30upx;
	}
	.footerView{
		width: 100%;
		height: 40upx;
		color: #007AFF;
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		bottom: 30upx;
		
	}
</style>
